<template>
    <div class="data-box">
        <el-card style="margin-bottom: 16px" v-if="accountlist.length>1">
            <div class="select-boxt flex-row aic" >
                <el-select @change="selecteda" v-model="account_id" placeholder="请选择账户信息">
                    <el-option
                            v-for="item in accountlist"
                            :key="item.id"
                            :label="item.username"
                            :value="item.id">
                    </el-option>
                </el-select>
                <!-- 上线的时候记得删除这个tip -->
                <div class="item" style="padding-left: 16px">这个选项要加到权限设置里面，运营专员默认显示第一个客户账户的信息，客户账户的话，就显示自己的信息
                    <span class="red">上线的时候删除这个提示</span></div>
            </div>
        </el-card>
        <el-card>
            <div class="flex-row jc-space-between aic">
                <div class="service-top flex-row">
                    <div class="item">
                     <!--   <el-avatar :size="80" :src="user.avatar">
                        </el-avatar> -->
						<img :src="user.avatar" style="width: 80px;height: 80px;border-radius: 50%;"/>
                    </div>
                    <div class="item flex-column jc-center">
                        <div class="title">{{user.username}}</div>
                        <div class="name">{{user.nickname}}</div>
                    </div>
                </div>
                <div class="total-number">
                    <div class="name">视频总数量</div>
                    <div class="number">{{account_data.total_videos}}</div>
                </div>
            </div>
        </el-card>
    
        <div class="data-statistic flex-row">
            <el-card class="data-statistic-card">
                <div class="name">播放量<!-- 视频总播放量 --></div>
                <div class="number">{{account_data.total_video_views}}</div>
            </el-card>
            <el-card class="data-statistic-card">
                <div class="name">主页访问<!-- 点赞数 --></div>
                <div class="number">{{account_data.total_likes}}</div>
            </el-card>
            <el-card class="data-statistic-card">
                <div class="name">作品点赞<!-- 新增点赞数 --></div>
                <div class="number">{{account_data.new_likes}}</div>
            </el-card>
            <el-card class="data-statistic-card">
                <div class="name">作品评论<!-- 粉丝数 --></div>
                <div class="number">{{account_data.total_fans}}</div>
            </el-card>
            <el-card class="data-statistic-card">
                <div class="name">新增粉丝数</div>
                <div class="number">{{account_data.new_fans}}</div>
            </el-card>
          <!--  <el-card class="data-statistic-card">
                <div class="name">评论数</div>
                <div class="number">{{account_data.total_comments}}</div>
            </el-card>
            <el-card class="data-statistic-card">
                <div class="name">主页访问数</div>
                <div class="number">{{account_data.home_page_visits}}</div>
            </el-card> -->
          <!--  <el-card class="data-statistic-card">
                <div class="name">用户行为量</div>
                <div class="number">{{account_data.behavior}}</div>
            </el-card> -->
        </div>

        <el-card style="margin-bottom: 16px">
            <!-- 这样写的目的是为了固定表头，内容区域滚动 -->
            <table class="table table-bordered table-sm" style="margin-bottom: -1px;">
                <tr>
                    <th style="width: 50px;">序号</th>
                    <th style="width:200px;">关键词/标题</th>
                    <th style="width:165px;">抖音号</th>
                    <th style="width:165px;">联系方式</th>
                    <th style="width:165px;">时间</th>
                    <th style="width:200px;">线索</th>
                    <th style="width:165px;">是否电联</th>
                    <th style="width:165px;">是否加微</th>
                    <th>是否有效</th>
                </tr>
            </table>
            <div class="data-table">
                <table class="table table-bordered table-sm">
                    <tr v-for="(item,index) in cluelist" :key="index">
                        <td class="text-center" style="width: 50px;">{{index + 1}}</td>
                        <td class="text-center" style="width:200px;">{{item.title}}</td>
                        <td class="text-center" style="width:165px;">{{item.tiktok}}</td>
                        <td class="text-center" style="width:165px;">{{item.contact_information}}</td>
                        <td class="text-center" style="width:165px;">{{item.add_time}}</td>
                        <td class="text-center" style="width:200px;">{{item.content}}</td>
                        <td class="text-center" style="width:165px;">{{item.is_electrical_connection}}</td>
                        <td class="text-center" style="width:165px;">{{item.is_wechat}}</td>
                        <td class="text-center">{{item.is_number_valid}}</td>
                    </tr>
                </table>
            </div>
            <!-- 分页 -->
            <div class="custom-pagination" style="padding: 0; text-align: left;">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange">
                </el-pagination>
            </div>
        </el-card>

        <!-- echarts -->
        <div class="echarts-card flex-row">
           <div class="item">
                <el-card style="height: 100%">
                    <div class="top flex-row jc-space-between">
                        <span class="name">视频数据</span>
                        <span class="time">数据更新于：{{account_behavior_data.updatetime}}</span>
                    </div>
                    <div class="date-select flex-row jc-flex-end">
                        <span :class="{active:7==chart1_type }" @click="chart1typeHandle(7)">近7天</span>
                        <span :class="{active:30==chart1_type }" @click="chart1typeHandle(30)">近30天</span>
                    </div>

                  
                    <div ref="echarts1" class="my-echart"></div>

                    <div class="date-select flex-row jc-flex-end">
                        <span :class="{active:1==chart1_index }" @click="chart1Handle(1)">播放量</span>
                        <span :class="{active:2==chart1_index }" @click="chart1Handle(2)">点赞数</span>
                    <!--    <span :class="{active:3==chart1_index }" @click="chart1Handle(3)">分享数</span> -->
                        <span :class="{active:4==chart1_index }" @click="chart1Handle(4)">评论数</span>
                    </div>
                </el-card>
            </div>
            <div class="item">
                <el-card style="height: 100%">
                    <div class="top flex-row jc-space-between">
                        <span class="name">用户行为数据</span>
                        <span class="time">数据更新于：{{account_behavior_data.updatetime}}</span>
                    </div>

                    <!-- echart -->
                    <div ref="echarts2" class="my-echart"></div>

                   <!-- <div class="flex-row menu-echart">
                        <span class="name" :class="{active:1==chart2_type }" @click="chart2typeHandle(1)">点赞 {{account_behavior_data.likes}}</span>
                        <span class="name" :class="{active:2==chart2_type }" @click="chart2typeHandle(2)">取消点赞 {{account_behavior_data.cancel_likes}}</span>
                        <span class="name" :class="{active:3==chart2_type }" @click="chart2typeHandle(3)">评论 {{account_behavior_data.comments}}</span>
                        <span class="name" :class="{active:4==chart2_type }" @click="chart2typeHandle(4)">关注 {{account_behavior_data.follow}}</span>
                        <span class="name" :class="{active:5==chart2_type }" @click="chart2typeHandle(5)">取消关注 {{account_behavior_data.cancel_follow}}</span>
                        <span class="name" :class="{active:6==chart2_type }" @click="chart2typeHandle(6)">私信 {{account_behavior_data.private_letter}}</span>
                    </div> -->
                </el-card>
            </div>
            <div class="item">
                <el-card style="height: 100%">
                    <div class="top flex-row jc-space-between">
                        <span class="name">粉丝数据</span>
                        <span class="time">数据更新于：{{account_behavior_data.updatetime}}</span>
                    </div>
                    <div class="date-select flex-row jc-flex-end">
                        <span :class="{active:7==chart3_type }" @click="chart3typeHandle(7)">近7天</span>
                        <span :class="{active:30==chart3_type }" @click="chart3typeHandle(30)">近30天</span>
                    </div>

                    <!-- echart -->
                    <div ref="echarts3" class="my-echart"></div>

                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    // echarts 只能安装 5.0以下的版本 2021-06-16 14:00 leo
    import echarts from "echarts";

    export default {
        data() {
            return {
                accountlistold: [],
				accountlist:[],
                page: 1, // 当前页码
				pagesize: 10, // 当前条数
				total: 0, // 总条数
                cluelist:[],
                value: '',
                account_id:0,
                user:[],
                account_data:[],
                account_behavior_data:[],
                chart1:{
                    xAxis:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    series_name:"播放量",
                    series_data:[120, 132, 101, 134, 90, 230, 2190],
                },
                chart1_type:7,
                chart1_index:1,
                accounts_detail:{},
                chart3_type:7,
                chart3:{
                    data:[
                        {value: 0, name: '累计粉丝数量'},
                        {value: 0, name: '新增粉丝数量'},
                    ],
                },
                chart2_type:1,
                chart2:{
                    name:"点赞",
                    legend:["累计",'昨日新增'],
                    data:[
                        {value: 0, name: '累计'},
                        {value: 0, name: '昨日新增'},
                    ],
                },

            }
        },
        mounted() {

            this.$http.post("common/users").then((response) => {
                console.log(response.data);
                if (response.data.records.length > 0){ 
                    this.accountlist=response.data.records;
                    this.account_id = this.accountlist[0].id;
                    console.log(this.account_id);
                    this.get_accounts();
                }
            });
           // this.createEchart1(111);
            this.createEchart2(111);
            this.createEchart3(111);
           
        },
        methods: {


            get_list(){
				this.$http.post("accounts/cluelst",{page:this.page,limit:this.pagesize,customer_uid:this.account_id}).then((response) => {
					this.total=response.data.total;
					this.cluelist=response.data.records;
					console.log(this.cluelist)
				})
			},

            chart1Handle(index) {
                console.log(index);
                this.chart1_index = index;
                this.updatechart1();
            },

            chart1typeHandle(index) {
                console.log(index);
                this.chart1_type = index;
                this.updatechart1();
            },

            chart2typeHandle(index) {
                console.log(index);
                this.chart2_type = index;
                this.updatechart2();
            },

            chart3typeHandle(index) {
                console.log(index);
                this.chart3_type = index;
                this.updatechart3();
            },
            pageChange(page) {
                console.log(page)
                this.page = page;
            },
            selecteda(id) {
               
                this.account_id = id;
                console.log(this.account_id);
                this.get_accounts();
            },
            get_accounts(){
                this.$http.post("accounts/detail",{id:this.account_id}).then((response) => {
					
					var datas=response.data;
					
					this.user=datas.user;
					this.account_data=datas.account_data;
					this.account_behavior_data=datas.account_behavior_data;

                    this.accounts_detail = response.data;
                    
					
					this.updatechart1();
                    this.updatechart3();
                    this.updatechart2();

                     this.get_list();
                   
				});
            },

            updatechart1() {
            //    播放量</span>
            //             <span :class="{active:2==chart1_index }" @click="chart1Handle(2)">点赞数</span>
            //             <span :class="{active:3==chart1_index }" @click="chart1Handle(3)">分享数</span>
            //             <span :class="{active:4==chart1_index }" @click="chart1Handle(4)">评论数</span>

                
                if (this.chart1_type == 7 && this.chart1_index == 1 ) {
                    this.chart1.series_data =this.accounts_detail.views_list_7d.date_val;
                    this.chart1.xAxis =this.accounts_detail.views_list_7d.short_dates;
                    this.chart1.series_name =this.accounts_detail.views_list_7d.name;
                } else if (this.chart1_type == 30 && this.chart1_index == 1 ) {
                    this.chart1.series_data =this.accounts_detail.views_list_30d.date_val;
                    this.chart1.xAxis =this.accounts_detail.views_list_30d.short_dates;
                    this.chart1.series_name =this.accounts_detail.views_list_30d.name;
                } else if (this.chart1_type == 7 && this.chart1_index == 2 ) {
                    this.chart1.series_data =this.accounts_detail.likes_list_7d.date_val;
                    this.chart1.xAxis =this.accounts_detail.likes_list_7d.short_dates;
                    this.chart1.series_name =this.accounts_detail.likes_list_7d.name;
                } else if (this.chart1_type == 30 && this.chart1_index == 2 ) {
                    this.chart1.series_data =this.accounts_detail.likes_list_30d.date_val;
                    this.chart1.xAxis =this.accounts_detail.likes_list_30d.short_dates;
                    this.chart1.series_name =this.accounts_detail.likes_list_30d.name;
                } else if (this.chart1_type == 7 && this.chart1_index == 3 ) {
                    this.chart1.series_data =this.accounts_detail.share_list_7d.date_val;
                    this.chart1.xAxis =this.accounts_detail.share_list_7d.short_dates;
                    this.chart1.series_name =this.accounts_detail.share_list_7d.name;
                } else if (this.chart1_type == 30 && this.chart1_index == 3 ) {
                    this.chart1.series_data =this.accounts_detail.share_list_30d.date_val;
                    this.chart1.xAxis =this.accounts_detail.share_list_30d.short_dates;
                    this.chart1.series_name =this.accounts_detail.share_list_30d.name;
                } else if (this.chart1_type == 7 && this.chart1_index == 4 ) {
                    this.chart1.series_data =this.accounts_detail.comments_list_7d.date_val;
                    this.chart1.xAxis =this.accounts_detail.comments_list_7d.short_dates;
                    this.chart1.series_name =this.accounts_detail.comments_list_7d.name;
                } else if (this.chart1_type == 30 && this.chart1_index == 4 ) {
                    this.chart1.series_data =this.accounts_detail.comments_list_30d.date_val;
                    this.chart1.xAxis =this.accounts_detail.comments_list_30d.short_dates;
                    this.chart1.series_name =this.accounts_detail.comments_list_30d.name;
                }
                console.log(this.chart1);
                console.log(this.chart1.xAxis);
                console.log("=======+++1222");

                this.createEchart1(111);
            },

            updatechart3() {
          
                var chart3_val = 0;
                if (this.chart3_type == 7 ) {
                    
                    chart3_val =this.accounts_detail.account_behavior_data.fans_7d;
                }else{
                    chart3_val =this.accounts_detail.account_behavior_data.fans_30d;
                }
                
                this.chart3.data=[
                    {value: this.accounts_detail.account_behavior_data.cumulative_fans, name: '累计粉丝数量'},
                    {value: chart3_val, name: '新增粉丝数量'},
                ]

                this.createEchart3(111);
            },

            updatechart2() {
          
               
                if (this.chart2_type == 1 ) {
                    this.chart2.name = "点赞";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.likes, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_new_likes, name: '昨日新增'},
                    ]
                }else if (this.chart2_type == 2 ) {
                    this.chart2.name = "取消点赞";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.cancel_likes, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_cancel_likes, name: '昨日新增'},
                    ]
                }else if (this.chart2_type == 3 ) {
                    this.chart2.name = "评论";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.comments, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_new_comments, name: '昨日新增'},
                    ]
                }else if (this.chart2_type == 4 ) {
                    this.chart2.name = "关注";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.follow, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_new_follow, name: '昨日新增'},
                    ]
                }else if (this.chart2_type == 5 ) {
                    this.chart2.name = "取消关注";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.cancel_follow, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_cancel_follow, name: '昨日新增'},
                    ]
                }else if (this.chart2_type == 6 ) {
                    this.chart2.name = "私信";
                   this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.private_letter, name: '累计'},
                        {value: this.accounts_detail.account_behavior_data.yesterday_new_private_letter, name: '昨日新增'},
                    ]
                }else{
                     this.chart2.name = "点赞";
                    this.chart2.data=[
                        {value: this.accounts_detail.account_behavior_data.cumulative_fans, name: '累计粉丝数量'},
                        {value: chart3_val, name: '新增粉丝数量'},
                    ]
                }
                
                this.createEchart2(111);
            },
            
            createEchart1(datas) {
                let myChart = echarts.init(this.$refs.echarts1);
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [this.chart1.series_name],
                        left: 'right',
                        icon: 'circle',
                        itemWidth: 10,
                        itemHeight: 10,
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.chart1.xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    color: ['#5B91FB'],
                    series: [
                        {
                            name: this.chart1.series_name,
                            type: 'line',
                            symbolSize: 10,
                            symbol: 'circle',
                            smooth: true,
                            data: this.chart1.series_data
                        }
                    ]
                });
            },
            createEchart2(datas) {
                let myChart = echarts.init(this.$refs.echarts2);
				var option = {
				  xAxis: {
				    type: 'category',
				    data: ['播放量', '主页访问', '作品点赞', '作品评论', '新增粉丝']
				  },
				  tooltip: {
				      trigger: 'item',
				     formatter: '{b}\n{c}'
				  },
				  yAxis: {
				    type: 'value'
				  },
				 
				  series: [
				    {
				      data: [this.account_data.total_video_views,this.account_data.total_likes,this.account_data.new_likes ,this.account_data.new_fans,this.account_data.new_fans],
				      type: 'bar',
					    barWidth: 25,//固定柱子宽度 
					  itemStyle: {
					  
					                      normal: {
					  
					  　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
					  
					                          color: function(params) {
					                              var colorList = ['#099860','#9f1b33','#448ef1','#f3c345','#0a9762',];
					                              return colorList[params.dataIndex]
					                          },
					  
					  　　　　　　　　　　　
					                      }
					  
					                  },
				    }
				  ]
				};
				myChart.setOption(option)
               /* myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'right',
                        data: this.chart2.legend,
                    },
                    color: ['#5B91FB', '#61DEAA'],
                    series: [
                        {
                            name: this.chart2.name,
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            data:this.chart2.data,
                        }
                    ]
                }); */
            },
            createEchart3(datas) {
                let myChart = echarts.init(this.$refs.echarts3);
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'right',
                        data: ['累计粉丝数量', '新增粉丝数量']
                    },
                    color: ['#5B91FB', '#61DEAA'],
                    series: [
                        {
                            name: '动态获取这个名字',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            data: this.chart3.data
                        }
                    ]
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .data-box {
        padding: 16px;
        background-color: #ffffff;

        .echarts-card {
            .item {
                width: calc(50% - 8px);
                height: 465px;
                margin-bottom: 16px;

                &:nth-child(1) {
                    margin-right: 16px;
                }

                .my-echart {
                    width: 100%;
                    height: 320px;
                }

                .top {
                    height: 24px;
                    line-height: 24px;

                    .name {
                        font-weight: bold;
                        font-size: 16px;
                    }

                    .time {
                        color: #909399;
                    }
                }

                .date-select {
                    padding: 8px 0;

                    span {
                        background-color: #f6f6f7;
                        padding: 4px 16px;
                        border-radius: 20px;
                        font-size: 13px;
                        margin-left: 8px;
                        cursor: pointer;
                    }

                    .active {
                        background-color: #3056d3;
                        color: #fff;
                    }
                }

                .menu-echart {
                    .name {
                        width: calc(100% / 3);
                        line-height: 32px;
                        text-align: center;
                        font-size: 13px;
                        color: rgb(144, 147, 153);
                        cursor: pointer;
                    }

                    .active {
                        color: yellowgreen;
                    }
                }
            }
        }

        .service-top {

            .item {
                margin-right: 20px;
                letter-spacing: 2px;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                }

                .name {
                    font-size: 14px;
                }
            }
        }

        .total-number {

            .name {
                font-size: 15px;
                color: #333;
                font-weight: bolder;
                letter-spacing: 1px;
                line-height: 24px;
            }

            .number {
                line-height: 24px;
                color: #409EFF;
                font-weight: bold;
                font-size: 18px;
            }
        }

        .data-statistic {
            margin-top: 16px;

            .data-statistic-card {
                width: calc((100% - 74px) / 5);
                margin-right: 16px;
                margin-bottom: 16px;

                &:nth-child(5n) {
                    margin-right: 0;
                }

                .name {
                    font-size: 15px;
                    color: #333;
                    font-weight: bolder;
                    letter-spacing: 1px;
                    line-height: 24px;
                }

                .number {
                    line-height: 24px;
                    color: #409EFF;
                    font-weight: bold;
                    font-size: 18px;
                }
            }
        }

        .data-table {
            max-height: 320px;
            overflow-y: auto;
            margin-bottom: 10px;
        }
    }
</style>
